<template>
  <div class="index" :style="{ paddingTop: state.isMaximized ? '0px' : '8px', display: state.isFullScreen ? 'none' : '' }">
    <Tabs />
    <Center />
    <Btns class="btns" />
  </div>
</template>

<script lang="ts">
import { watch } from 'vue'
import Btns from '@/components/Btns.vue'
import Tabs from '@/components/Tabs.vue'
import Center from '@/components/Center.vue'
import { state } from '@/store/state'
import { BrowserWindow } from 'electron'
import mutations from '@/store/mutations'
declare const window: any
const win: BrowserWindow = window.require('electron').remote.getCurrentWindow()
window.mutations = mutations
win.on('enter-full-screen', () => {
  state.isFullScreen = true
})
win.on('leave-full-screen', () => {
  state.isFullScreen = false
})
win.on('leave-html-full-screen', () => {})

export default {
  components: {
    Btns,
    Tabs,
    Center
  },
  setup() {
    watch(
      () => state.curTab,
      () => {
        mutations.wCurTab()
      }
    )

    watch(
      () => [state.isMaximized, state.isFullScreen],
      () => {
        mutations.contentViewAutoResize(state.curTab)
      }
    )
    return {
      state,
      change: () => {
        state.isMaximized = !state.isMaximized
      }
    }
  }
}
</script>

<style lang="less">
.index {
  background: #e7eaed;
  -webkit-user-select: none;
  .drag {
    -webkit-app-region: drag;
  }
  .noDrag {
    -webkit-app-region: no-drag;
  }
  & > .btns {
    position: absolute;
    right: 0px;
    top: 0px;
  }
}
html,
body {
  padding: 0px;
  margin: 0px;
}
</style>
